<template>
	<view class="container">
		<canvas canvas-id="circularProgress" style="width: 200px; height: 200px"></canvas>
	</view>
</template>
<script>
export default {
	data() {
		return {
			ctx: null,
			progress: 70, // 进度百分比
			radius: 90, // 环形进度条半径
			lineWidth: 10, // 线条宽度
			startAngle: 0 // 起始角度 -Math.PI / 2
		};
	},
	mounted() {
		this.drawCircularProgress();
	},
	methods: {
		drawCircularProgress() {
			this.ctx = uni.createCanvasContext('circularProgress', this);

			// 绘制环形进度条背景
			this.ctx.setStrokeStyle('#eee');
			this.ctx.setLineWidth(this.lineWidth);
			this.ctx.setLineCap('round');
			this.ctx.beginPath();
			this.ctx.arc(100, 100, this.radius, this.startAngle, this.startAngle + 2 * Math.PI, false);
			this.ctx.stroke();

			// 绘制环形进度条前景
			const endAngle = this.startAngle + (2 * Math.PI * this.progress) / 100;
			this.ctx.setStrokeStyle('#409EFF');
			this.ctx.beginPath();
			this.ctx.arc(100, 100, this.radius, this.startAngle, endAngle, false);
			this.ctx.stroke();

			// 绘制圆点
			const dotRadius = 5;
			this.ctx.setFillStyle('#F56C6C');
			this.ctx.beginPath();
			this.ctx.arc(100 + this.radius * Math.cos(endAngle - Math.PI / 2), 100 + this.radius * Math.sin(endAngle - Math.PI / 2), dotRadius, 0, 2 * Math.PI, false);
			this.ctx.fill();

			this.ctx.draw(true); // 绘制到画布上
		}
	}
};
</script>
